<template>
  <div class="im-emoji">
    <div class="im-emoji-c">
      <van-swipe :loop="false">
        <van-swipe-item v-for="(emojis, idx) in emojiList" :key="idx"
          ><img
            v-for="(emoji, idx2) in emojis"
            :src="emoji.url"
            :key="idx2"
            @click="selectEmoji(emoji.key)"
        /></van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import emojiList from '../utils/emojis';

export default {
  name: 'emoji-select',
  data() {
    return {
      emojiList
    };
  },
  methods: {
    selectEmoji(key) {
      this.$emit('selectEmoji', key);
    }
  }
};
</script>

<style lang="scss">
.im-emoji {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  .im-emoji-c {
    overflow: hidden;
    margin-top: 8px;
    width: 350px;
    height: 162px;
    img {
      float: left;
      width: 22px;
      height: 22px;
      margin: 14px;
    }
  }
  .van-swipe__indicators {
    bottom: 0;
    .van-swipe__indicator {
      background-color: #ccc;
      &.van-swipe__indicator--active {
        background-color: #db3030;
      }
    }
  }
}
</style>
